<template>
  <div id="app">
    <top-bar></top-bar>
    <hea-der></hea-der>
    <router-view />
    <shop-info></shop-info>
    <collections></collections>
    <banner-video></banner-video>
    <main-content></main-content>
    <foo-ter></foo-ter>
  </div>
</template>
<script>
import TopBar from "@/components/TopBar.vue"
import HeaDer from "@/components/Head.vue"
import ShopInfo from "@/components/shopInfo.vue"
import FooTer from "@/components/Footer.vue"
import Collections from "@/components/Collections.vue"
import bannerVideo from "@/components/bannerVideo.vue"
import mainContent from "@/components/mainContent.vue"
export default { components: { TopBar, FooTer,HeaDer,ShopInfo,Collections,bannerVideo,mainContent } }
</script>
<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  position: relative;
}
</style>